<template>
  <div class="score-card">
    <div class="card-header">
      <h2 class="card-title">芝麻分数</h2>
      <div class="date-buttons">
        <button @click="getData('today')">今天</button>
        <button @click="getData('yesterday')">昨天</button>
        <button @click="getData('dayBeforeYesterday')">前天</button>
      </div>
    </div>
    <div class="card-content">
      <div class="score-item">
        <span class="score-label">全国:</span>
        <span class="score-value">{{ totalScore }}</span>
      </div>
      <div class="score-item">
        <span class="score-label">芝麻700以上:</span>
        <span class="score-value">{{ score700Above }}</span>
      </div>
      <div class="score-item">
        <span class="score-label">芝麻650-700:</span>
        <span class="score-value">{{ score650To700 }}</span>
      </div>
      <div class="score-item">
        <span class="score-label">芝麻600-650:</span>
        <span class="score-value">{{ score600To650 }}</span>
      </div>
      <div class="score-item">
        <span class="score-label">芝麻1-600:</span>
        <span class="score-value">{{ score1To600 }}</span>
      </div>
      <div class="score-item">
        <span class="score-label">无芝麻:</span>
        <span class="score-value">{{ noScore }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<style scoped>
.score-card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-title {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.date-buttons {
  display: flex;
  gap: 10px;
}

button {
  background-color: #007bff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
}

.button:hover {
  background-color: #0056b3;
}

.card-content {
  font-size: 16px;
}

.score-item {
  margin-bottom: 8px;
}

.score-label {
  font-weight: bold;
}

.score-value {
  margin-left: 8px;
}

</style>
